<template>
  <div class="singer-home">
    <!-- 歌手概况 -->
    <div class="title">歌手概况</div>
    <p v-for="(item, index) in parseHtmlText" :key="index">
      {{ item }}
    </p>

    <!-- 代表作品，主要成就，演艺经历 -->
    <section v-for="(item, index) in introduction" :key="index" class="message">
      <div class="small-title">{{ item.ti }}</div>
      <div class="content">{{ item.txt }}</div>
    </section>
  </div>
</template>

<script>
export default {
  async created() {
    const { id } = this.$route.query;
    // 获取歌手主页信息
    const { data } = await this.axios.get(`/artist/desc?id=${id}`);
    const { briefDesc, introduction, topicData } = data;

    // 使用解构赋值直接赋值给组件的属性
    Object.assign(this, { briefDesc, introduction, topicData });
  },
  data() {
    return {
      briefDesc: null,
      introduction: [],

      topicData: [],
    };
  },

  computed: {
    // 解析数据
    parseHtmlText() {
      // if (this.briefDesc) {
      //   const reg = new RegExp(/\t/);
      //   // 过滤制表符
      //   return this.briefDesc.split("\n").filter((str) => !reg.test(str));
      // }

      // if (!this.briefDesc) {
      //   return [];
      // } else {
      //   return this.briefDesc.split("\n").filter((str) => !/\t/.test(str));
      // }

      return !this.briefDesc
        ? []
        : this.briefDesc.split("\n").filter((str) => !/\t/.test(str));
    },
  },
};
</script>

<style lang="less" scoped>
.singer-home {
  padding: 10px;

  .title {
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 20px;
    font-weight: bolder;
  }

  section {
    .small-title {
      width: 100%;
      height: 20px;
      line-height: 20px;
      font-size: 20px;
      font-weight: bold;
      margin-top: 20px;
    }
  }
}
</style>
